<template>
  <div class="deteailBox">
    <div class="beteail_center">
      <!-- 书籍介绍 -->
      <div class="booktop">
        <img :src="booksdetailArr.photo" alt="" />
        <!-- 书籍详情 -->
        <div class="bookBox">
          <div class="bookname">{{ booksdetailArr.book_name }}</div>
          <div class="bookauthor">{{ booksdetailArr.author_name }}</div>
          <div class="bookintroduction">
            {{ booksdetailArr.summary }}
          </div>
          <div class="classification">
            <!-- $router.push({path:'/browse',query:{tagid : item.id}}) -->
            <el-tag
              v-for="item in booksdetailArr.tag"
              :key="item.id"
              class="cursor"
              @click="
                $router.push({ path: '/browse', query: { tagid: item.id } })
              "
              >{{ item.name }}</el-tag
            >
          </div>
          <!-- 点击阅读 和 收藏 -->
          <div class="readbox">
            <div class="read cursor" @click="readFn()">Read</div>
            <div class="add cursor" @click="bookshelfsFn()">
              <!-- 0未收藏 1已收藏 -->
              <img
                v-show="addbook == 0"
                src="../../assets/homeimg/组 7098.png"
                alt=""
              />
              <img
                v-show="addbook == 1"
                src="../../assets/homeimg/组 70982.png"
                alt=""
              />
              Add
            </div>
          </div>
        </div>
        <div>

          <!-- 正方形广告 -->
          <ins
            class="adsbygoogle"
            style="display: block ;width:728px;height:90px"
            data-ad-client="ca-pub-5032048398333748"
            data-ad-slot="2378418308"
            data-ad-format="auto"
            data-full-width-responsive="true"
          ></ins>
        </div>
      </div>
      <!-- 内容 -->
      <div class="catalogue">
        <!-- 小说章节 -->
        <div class="catalogueBox" v-show="true">
          <!-- 导航栏 -->
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="Early reading" name="early"></el-tab-pane>
            <el-tab-pane
              :label="'Catalogue Chapter' + firstsectionArr.catalogue_count"
              name="catalogue"
            ></el-tab-pane>
          </el-tabs>
          <!-- 章节内容 -->
          <div class="chapter mengbai" v-show="activeName == 'early'">
            <div class="chapternumber">{{ firstsectionArr.title }}</div>
            <div class="chaptertext">
              {{ firstsectionArr.content }}
            </div>
            <div class="continue cursor" @click="readFn()">
              continue reading
            </div>
            <div class="zhezhao"></div>
          </div>
          <!-- 章节目录 -->
          <div class="chapter" v-show="activeName == 'catalogue'">
            <div class="mulu">
              <div class="chapternumber">
                Total {{ firstsectionArr.catalogue_count }} chapters
              </div>
              <!-- 排序滑块 -->
              <SortButton @sortFn="sortFn" />
            </div>
            <!-- 章节 -->
            <div
              class="muluList"
              v-infinite-scroll="chapterload"
              style="overflow: auto"
              :infinite-scroll-immediate="false"
            >
              <div
                @click="readFn(item.id, item.book_id)"
                class="mulunum cursor"
                v-for="item in cataloguesingleArr"
                :key="item.id"
              >
                {{ item.title }}
              </div>
            </div>
          </div>
        </div>
        <!-- 漫画详情 -->
        <div class="catalogueBox cartoonBox" v-show="false">
          <div class="cartoonTitle">Chapter lists</div>
          <div>
            <el-button
              round
              size="small"
              @click="countFn(index)"
              v-for="(item, index) in Math.ceil(count / 50)"
              :key="index"
              >{{ 1 + 50 * index }} -
              {{
                50 * (index + 1) >= count ? count : 50 * (index + 1)
              }}</el-button
            >
          </div>
          <div class="comicChapter">
            <div class="chapter" @click="goComic">01 boat show</div>
          </div>
        </div>
        <!-- 猜你喜欢 -->
        <div class="recommend">
          <div class="foryou">Recommend for you</div>
          <BookIntroduce
            :isShow="false"
            :booksList="booksdetailArr.like_books"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BookIntroduce from "../../components/BrowseChile/BookIntroduce.vue";
import SortButton from "../../components/SortButton.vue";
import {
  BooksdetailApi,
  FirstsectionApi,
  CataloguesinglebookApi,
  BookshelfsPostApi,
  BookshelfbybookApi,
} from "../../requery/api";
export default {
  data() {
    return {
      count: 520, //漫画章节总数
      loading: false,
      page: 2, //当前页数
      activeName: "early",
      firstsectionArr: [], //第一章内容和总章节
      cataloguesingleArr: [], //书本目录
      booksdetailArr: [], //书本介绍
      addbook: "0", //是否收藏书本 0未收藏 1已收藏
      booknumId: "", //第一章id
      textsort: "sort", //章节排序 srot 正 -srot 负
    };
  },
  methods: {
    //点击章节
    countFn(index) {
      console.log(index + 1);
    },
    // 章节滚动
    chapterload() {
      if (this.cataloguesingleArr[0].count == this.cataloguesingleArr.length)
        return;
      console.log(1);
      // this.loading = true;
      CataloguesinglebookApi({
        book_id: this.$route.query.id,
        page: this.page,
        size: 56,
        order_by: this.textsort,
      }).then((res) => {
        if (res.code == 200) {
          this.page++;
          res.data.map((item) => {
            this.cataloguesingleArr.push(item);
          });
        }
      });
    },
    // 漫画跳转
    goComic() {
      console.log(1);
      this.$router.push({ path: "comicreader", query: { id: "1" } });
    },
    // 点击收藏按钮跳转 本地缓存  booksdetailArr
    readFn(id, bookid) {
      if (id) {
        this.$router.push({
          path: "reader",
          query: { id: id, bookid: bookid },
        });
        return;
      }
      this.$router.push({
        path: "reader",
        query: { bookid: this.booksdetailArr.id, id: this.booknumId },
      });
    },
    // 添加书本到书架
    bookshelfsFn() {
      BookshelfsPostApi({
        book_id: this.$route.query.id,
      }).then((res) => {
        this.addbook = "1";
        console.log(res);
      });
    },
    // 书籍目录滚动刷新
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 排序按钮 sort等于正  -sort等于负
    sortFn(text) {
      this.textsort = text;
      this.page = 2;
      this.cataBookFz(1, text);
      console.log(text, "sortFn");
    },
    // 获取书本目录封装
    cataBookFz(page, order_by) {
      // 书本目录
      CataloguesinglebookApi({
        book_id: this.$route.query.id,
        page: page,
        size: 56,
        order_by: order_by,
      }).then((res) => {
        if (res.code == 200) {
          this.cataloguesingleArr = res.data;
          this.booknumId = res.data[0].id;
          console.log(res, "biik");
        }
      });
    },
  },
  created() {
    // 获取书本是否收藏
    BookshelfbybookApi({
      book_id: this.$route.query.id,
    }).then((res) => {
      if (res.code == 200) {
        this.addbook = res.data;
      }
      console.log(res, "this.$route.query.id");
    });
    // 书本介绍
    BooksdetailApi({
      id: this.$route.query.id,
    }).then((res) => {
      if (res.code == 200) {
        this.booksdetailArr = res.data;
      }
      console.log(res, "BooksdetailApi");
    });
    // 书本目录
    this.cataBookFz(1);
    // 获取第一章和总章节
    FirstsectionApi({
      book_id: this.$route.query.id,
    }).then((res) => {
      if (res.code == 200) {
        this.firstsectionArr = res.data;
      }
      console.log(res, "FirstsectionApi");
    });
  },
  components: {
    BookIntroduce,
    SortButton,
  },
  watch: {
    $route(to, from) {
      //将mounted中的数据在这里重新加载一下即可
      // 书本介绍
      BooksdetailApi({
        id: this.$route.query.id,
      }).then((res) => {
        if (res.code == 200) {
          this.booksdetailArr = res.data;
        }
        console.log(res, "BooksdetailApi");
      });
      // 书本目录
      this.cataBookFz(1);
      // 获取第一章和总章节
      FirstsectionApi({
        book_id: this.$route.query.id,
      }).then((res) => {
        if (res.code == 200) {
          this.firstsectionArr = res.data;
        }
        console.log(res, "FirstsectionApi");
      });
      // 是否收藏书籍
      BookshelfbybookApi({
        book_id: this.$route.query.id,
      }).then((res) => {
        this.addbook = res.data;
        console.log(res);
      });
    },
  },
};
</script>
 
<style lang = "less" scoped>
.adsbygoogle {
  width: 200px;
  height: 290px;
}
.el-button {
  margin: 0 10px 10px 0;
}
.deteailBox {
  width: 100vw;
  background: #fafafa;
  .beteail_center {
    width: 1160px;
    margin: 0 auto;
    padding: 26px 0 41px;
    box-sizing: border-box;
    /* background-color: #909; */
    .booktop {
      background-color: #fff;
      box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.05);
      padding: 26px 31px;
      box-sizing: border-box;
      display: flex;
      img {
        width: 219px;
        height: 293px;
        margin-right: 47px;
      }
      .bookBox {
        width: 700px;
        min-height: 293px;
        /* background-color: #090; */
        .bookname {
          font-size: 22px;
          font-weight: 500;
          color: #333333;
          margin-top: 10px;
        }
        .bookauthor {
          font-size: 14px;
          color: #999999;
          margin: 16px 0 16px;
        }
        .bookintroduction {
          height: 77px;
          font-size: 14px;
          font-family: San Francisco Display;
          line-height: 27px;
          color: #333333;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
        }
        .classification {
          margin-top: 25px;
          min-height: 42px;
          .el-tag {
            margin-right: 31px;
            margin-bottom: 10px;
          }
        }
        .readbox {
          font-size: 16px;
          display: flex;
          margin-top: 36px;
          .read {
            width: 151px;
            height: 33px;
            text-align: center;
            line-height: 33px;
            border-radius: 3px;
            background: #fb6e3b;
            color: #ffffff;
          }
          .add {
            width: 121px;
            height: 33px;
            border: 1px solid #a5a5a5;
            text-align: center;
            line-height: 33px;
            border-radius: 3px;
            margin-left: 28px;
            color: #666666;
            display: flex;
            align-items: center;
            img {
              width: 24px;
              height: 24px;
              margin-right: 5px;
              margin-left: 26px;
            }
          }
        }
      }
    }
    .catalogue {
      width: 1160px;
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      .catalogueBox {
        width: 800px;
        height: 1388px;
        padding: 22px;
        box-sizing: border-box;
        box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.05);
        background-color: #fff;
        /deep/.el-tabs__item {
          height: 50px !important;
          padding: 0 50px;
          font-size: 18px;
          font-weight: 500;
        }
        .mengbai {
          position: relative;
          .zhezhao {
            position: absolute;
            left: -22px;
            bottom: 0;
            width: 800px;
            height: 257px;
            background: linear-gradient(
              180deg,
              rgba(255, 255, 255, 0) 0%,
              #ffffff 100%
            );
          }
        }
        .chapter {
          .chapternumber {
            font-size: 18px;
            font-weight: 500;
            color: #333333;
            margin: 33px 0;
          }
          .chaptertext {
            width: 100%;
            height: 1119px;
            font-size: 14px;
            line-height: 21px;
            color: #333333;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: pre-line;
          }
          .continue {
            width: 204px;
            height: 55px;
            border: 1px solid #dddddd;
            border-radius: 28px;
            text-align: center;
            line-height: 55px;
            font-size: 16px;
            color: #666666;
            /* margin: 13px auto 0; */
            position: absolute;
            left: 50%;
            margin-left: -102px;
            bottom: -70px;
            z-index: 2;
          }
          .mulu {
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
          .muluList {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            height: 1200px;
            .mulunum:hover {
              color: #fb6e3b;
            }
            .mulunum {
              font-size: 16px;
              color: #333333;
              width: 43%;
              margin-bottom: 28px;
            }
          }
        }
      }
      .cartoonBox {
        .cartoonTitle {
          font-size: 20px;
          font-family: PingFang SC;
          font-weight: 600;
          line-height: 28px;
          color: #333333;
          margin-bottom: 18px;
        }
        .comicChapter {
          display: flex;
          flex-wrap: wrap;
          /* justify-content: space-between; */
          margin-top: 20px;
          .chapter {
            width: 177px;
            height: 42px;
            line-height: 42px;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 550;
            color: #333333;
            padding: 0 17px;
            box-sizing: border-box;
            margin-bottom: 13px;
            margin-right: 15px;
          }
          .chapter:nth-child(4n) {
            margin-right: 0;
          }
        }
      }
      .recommend {
        width: 334px;
        padding: 22px;
        box-sizing: border-box;
        background-color: #fff;
        box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.05);
        .foryou {
          font-size: 20px;
          margin-bottom: 25px;
          color: #333333;
        }
      }
    }
  }
}
</style>